<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>

    <div id="app">
        <button @click="setObj">修改obj</button>

    </div>
  

    <script>

        let vm = new Vue({
            // 数据层
            el: "#app", //选择器
            data: {  //存放数据 存放变量
               obj:{
                name:"aaaa",
                age:"bbbb"
               }
            },
            watch:{
                // obj(){
                //     console.log(123)
                // }
                obj:{
                    // 监听函数
                    handler:function (n,o){
                        console.log(n,o)
                        // 引用数据类型 第一个参数和第二个参数相同
                    },
                    deep:true, //开启深度监听
                    immediate:true //初始化时先执行一次
                }
            },
            methods: { //用来定义方法的地方
                setObj(){
                    // this.obj = {one:1111}
                    this.obj.name = "xxxxxx"
                }
            }
        })



    </script>



</body>

</html>